<template>
	<view :style="{paddingBottom: select ? '60px' : '0'}">
		<view class="img_wrapper" v-if="details.fileType == 'image' && details.fileUrl">
			<image :src="details.fileUrl" class="top_banner"></image>
		</view>
		<view class="video_wrapper" v-if="details.fileType == 'video' && details.fileUrl && showVideo">
			<video :src="details.fileUrl" class="video" show-center-play-btn controls></video>
		</view>
		<view class="u-padding-30" v-if="details.jobAnalyze">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>职业介绍</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				{{details.jobAnalyze}}
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7"></view>

		<view class="u-padding-30" v-if="details.specialtyJobRelationList.length">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>大学专业类推荐</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				<navigator :url="`/pages/explore/zhuanye_lei?code=${item.secSpeCode}&name=${item.specialtyName}`"
					class="color-active u-padding-10" v-for="(item, index) in details.specialtyJobRelationList">
					{{item.specialtyName}}
				</navigator>
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.specialtyJobRelationList.length">
		</view>

		<view class="u-padding-30" v-if="details.jobDefinition">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>职业定义</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				{{details.jobDefinition}}
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.jobDefinition"></view>

		<view class="u-padding-30" v-if="details.salaryDesc">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>薪酬待遇</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				{{details.salaryDesc}}
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.salaryDesc"></view>

		<view class="u-padding-30" v-if="details.inforBack">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>知识背景</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				{{details.inforBack}}
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.inforBack"></view>

		<view class="u-padding-30" v-if="details.developProspect">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>发展前景</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				{{details.developProspect}}
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.developProspect"></view>

		<view class="u-padding-30" v-if="details.jobKill">
			<view class="title font-28 color-333 row">
				<view class="border"></view>
				<view>职业技能</view>
			</view>
			<view class="u-font-sm pd_t_20 u-p-b-10 u-p-l-20 color-666">
				{{details.jobKill}}
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7" v-if="details.jobKill"></view>
		<!-- 精彩讨论区域 -->
		<view class="discussion">
			<view class="" style="margin: 20rpx 30rpx;">
				<u-section color="#245482" sub-color="#245482" title="精彩讨论" sub-title="更多" @click="toDiscussion">
				</u-section>
			</view>
			<!-- <discussionItem :showType="false" :showTime="false" :userInfo="userInfo" :infoData="infoData"></discussionItem> -->
			<view style="margin: 20rpx 0;" v-for="(item,index) in discuList" :key="index">
				<Diary :showMore="true" :user-info="item.compassNormalUser" :info-data="item"
					@like-change="res => likeChange(index, res)" @delete="deleteCallback(index)"
					:showLine="((discuList.length===1) || (discuList.length===2 &&index===1 )) ? true:false" />

			</view>
			<view class="u-p-b-30" v-if="discuList.length===0">
				<!-- 数据为空时显示 -->
				<empty :btn-string="'暂无讨论，写一条吧!'"
					:url="isLogin ? '/package/discussion/publish?diaryName='+details.jobName: '/package/login/wx_login'"
					:showDataImg="true">
				</empty>
			</view>
			<view style="height: 88rpx" class="u-text-center" @click="toDiscussion">
				查看更多
			</view>
		</view>
		<view class="empty" style="height: 20upx;background: #f7f7f7">
		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<view class="select-wrap">
			<view class="select-btn" @click="delJob" style="background-color: #6BB303;"
				v-if="isChoose.length>0 && isLogin">已选为我的目标职业</view>
			<view class="select-btn" @click="chooseJob" v-else>选择为我的目标职业</view>
		</view>
	</view>
</template>

<script>
	// 引用讨论组件
	import discussionItem from './components/discussionItem'
	import empty from '../forum/components/empty'
	import Diary from '../forum/components/Diary'
	import {
		TOAST
	} from "../../util/util";
	import {
		CHECK_TOKEN
	} from '../../util/util'
	import {
		request
	} from "../../util/api";
	import {
		getCurrentFullPath
	} from "../../util/util";
	export default {
		components: {
			discussionItem,
			empty,
			Diary
		},
		async onLoad(option) {
			this.getDetail(option.id)
			this.getGlobalData(option.id)
			let showVideo = await this.getDictByType('videoSwitch')
			if (!showVideo.length) {
				this.showVideo = true
			} else {
				if (showVideo[0].dictValue == 0) {
					this.showVideo = false
				} else {
					this.showVideo = true
				}
			}
			if (option.select) {
				this.select = option.select
			}
		},

		data() {
			return {
				details: {},
				showVideo: true,
				select: '1',
				userData: {},
				newMsgFlag: false,
				firstDiary: {},
				allLikeNum: 0,
				isChoose: [],
				isLogin: CHECK_TOKEN(),
				busineId: "",
				Rid: "",
				jobName: "",
				discuList: [],
				btnDisable: false
			}
		},
		methods: {
			async getDictByType(dictType) {
				if (!dictType) return []
				let res = await request({
					url: '/system/wx/dict/type/' + dictType,
					token: true,
				})
				return res.data
			},
			// 跳转到精彩讨论页
			toDiscussion() {
				this.$u.route({
					url: '/package/discussion/discussion?jobName=' + this.details.jobName,
				})
			},
			// 跳转到发布页面
			toFabu() {
				this.$u.route({
					url: '/package/discussion/publish?diaryName=' + this.details.jobName,
				})
			},
			// 跳转到精彩讨论页面
			loadMore() {
				uni.navigateTo({
					url: "/pages/discussion/discussion"
				})
			},
			// 获取讨论详情信息
			getDisList() {
				let openUrl = '/system/CompassDiary/wxDiaryNumList'
				if (!CHECK_TOKEN()) {
					openUrl = '/system/CompassDiary/wxDiaryNoNumList'
				}
				request({
					url: openUrl,
					method: "post",
					data: {
						typeCode: 1,
						lnum: 2,
						typeName: this.details.jobName
					}
				}).then(res => {
					this.discuList = res.rows
				})
			},
			// 点赞
			likeChange(index, data) {
				const {
					likeFlag,
					likeNum
				} = data
				this.$set(this.discuList[index], 'likeFlag', likeFlag)
				this.$set(this.discuList[index], 'likeNum', likeNum)
			},
			// 删除讨论
			deleteCallback(index) {

				this.discuList.splice(index, 1)
			},
			// 获取目标职业数据
			getGlobalData(detail) {
				let openUrl = '/system/compassMajobMine/queryByUserType'
				if (!CHECK_TOKEN()) {
					openUrl = '/system/compassMajobMine/queryByUserNoType'
				}
				request({
					url: openUrl,
					method: "post",
					data: {
						busineId: detail,
						mjType: "1",
						mjUser: uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
					}
				}).then(res => {
					this.isChoose = res.data
					if (res.data.length > 0) {
						this.Rid = res.data[0].id
					}
				})
			},
			// 获取职业详情
			getDetail(detail) {
				this.busineId = detail
				request({
					url: '/system/wx/CompassJobInfo/' + detail,
					token: true
				}).then(res => {
					this.details = res.data
					this.btnDisable = true
					uni.setNavigationBarTitle({
						title: res.data.jobName || ''
					});
					this.getDisList()
				})
			},
			// 设置为我的职业目标方法
			chooseJob() {
				if (this.btnDisable) {
					request({
						url: "/system/compassMajobMine/saveMajorJob",
						method: "post",
						data: {
							mjType: 1,
							busineId: this.busineId,
							busineName: this.details.jobName,
							mjUser: uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
						}
					}).then((res) => {
						this.getGlobalData()
						TOAST('选择成功')
					})
				}
			},
			// 删除目标职业
			delJob() {
				if (this.btnDisable) {
					request({
						url: "/system/compassMajobMine/deleteMajorjob/" + this.Rid,
						method: "delete",
					}).then(res => {
						TOAST("取消成功")
						this.isChoose = []
						// let pages = getCurrentPages();
						// let prevPage = pages[pages.length - 2];
						// try {
						//   prevPage.$vm.this.$store.commit('getGlobalData')
						// } catch (e) {

						// }
					})
				}
			},
			choose() {
				this.$u.route({
					url: '/pages/forum/job?select=' + this.select + '&name=' + this.details.jobName,
					type: 'reLaunch'
				})
			}
		},
		onShareAppMessage(res) {
			return {
				path: getCurrentFullPath()
			}
		},

	}
</script>

<style scoped lang="scss">
	.title {
		.border {
			width: 4px;
			background: #1f476d;
			margin-right: 20upx;
		}
	}

	.top_banner {
		width: 100%;
		height: 360upx;
	}

	.video {
		width: 100%;
		height: 400upx;
	}

	.select-wrap {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 23px;
		position: fixed;
		bottom: 0;
		width: 100%;

		.select-btn {
			width: 95%;
			height: 46px;
			line-height: 46px;
			line-height: 46px;
			border-radius: 23px;
			color: #fff;
			font-weight: bold;
			font-size: 18px;
			background: rgba(42, 108, 172, 100);
			text-align: center;
		}
	}

	.fabu {
		position: fixed;
		right: 28rpx;
		bottom: 130rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		height: 120rpx;
		z-index: 10;

		image {
			width: 100%;
			height: 100%;
		}

	}
</style>
